<?php

$servername = "localhost";
$username = "root";
$password = "root";

try {
    $conn = new PDO("mysql:host=$servername;dbname=hoho;", $username, $password);
    echo "连接成功<br/>";
} catch (PDOException $e) {
    echo $e->getMessage();
}

$sql = "select * from dish;";
$sqls = $conn->prepare($sql);
$a = $sqls->execute();
$w = $sqls->fetchAll();
$size = sizeof($w);
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="./lib/bootstrap/css/bootstrap.css" rel="stylesheet">
</head>

<body>

    <div class="container ">
        <div class="row">

            <div class="col-xs-12">


                <div class="panel panel-default">
                    <div class="panel-body">
                        <h2>购物中心</h2>
                    </div>
                </div>
            </div>

            <div class="col-xs-4">
                <div class="modal-content">
                    <form>
                        <div class="modal-header">
                            <h4 class="modal-title">用户</h4>
                        </div>
                        <div class="modal-footer">

                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-addon glyphicon glyphicon-user"></div>
                                    <input type="text" class="form-control" id="exampleInputAmount" placeholder="">
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-addon glyphicon glyphicon-lock"></div>
                                    <input type="text" class="form-control" id="exampleInputAmount" placeholder="">
                                </div>
                            </div>

                            <button type="button" data-toggle="modal" data-target="#hh" class="btn btn-default">登录</button>
                            <div class="modal fade" id="hh">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title" style="text-align:left">登录确认</h4>
                                        </div>
                                        <div class="modal-body" style="text-align:left">
                                            <p>你确定要马上登录?</p>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">确定</button>
                                            <button type="button" class="btn btn-primary" data-dismiss="modal">取消</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>

                </div>
            </div>

            <div class="col-xs-8">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title">商品</h3>
                    </div>

                    <div class="modal-body">
                        <div class="row">

                            <?php

                            for ($i = 0; $i < $size; $i = $i + 1) {
                                $item = $w[$i];
                                ?>

                                <div class="col-xs-6 col-md-3" style="text-align:center">                                   
                                     <a class="thumbnail"><img src="<?php echo $item['icon']; ?>"></a>
                                     <a><?php echo $item['name']?></a>
                                </div>
                            <?php } ?>
                        </div>
                    </div>
                    <div class="modal-footer"></div>
                </div>
            </div>
        </div>
    </div>
    <script src="./lib/jquery.min.js"></script>
    <script src="./lib/bootstrap/js/bootstrap.js"></script>
</body>

</html>